<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">

    <button @click="flag = !flag">交换</button><br>
    <button @click="change">交换</button>


    <!--v-if会删除添加dom操作   v-show只是切换-->
    <!--如果元素涉及到频繁的切换 最好不要涉及到v-if-->
    <!--如果元素可能永远不会被显示出来 则推荐使用v-if-->
    <h3 v-if="flag">这是一个v-if控制的元素</h3>
    <h3 v-show="flag">这是一个v-flagf控制的元素</h3>

</div>
<script>
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{
            change() {
//                var  _this = this
//                if (_this.flag === true){
//                    _this.flag = false
//                } else {
//                    _this.flag = true
//                }
                this.flag = !this.flag
            }

        }
    })
</script>
</body>
</html>
